﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>留言箱</title>
<style type="text/css">
	*{margin:0;padding: 0;}
	.wrap{
		width:780px;
		height: 880px;
		margin:0 auto;
		box-shadow: 10px 10px 30px #ccc;
		border-radius: 2px;
		padding: 10px;
		position: relative;
		top: 50px;
	}
	.says{
		width:780px;
		height: 200px;
		position: absolute;
	}
	.says h1{
		font-size:18px;
		color:#A8A8A8;
		margin-bottom: 5px;
	}
	textarea{
		width:760px;
		height: 100px;
		outline: none;
		resize: none;
		border:1px solid #ccc;
		border-radius: 3px;
		padding: 5px;
		color:#660000;
	}
	button{
		width:100px;
		height: 30px;
		border:none;
		cursor: pointer;
		background: #00CC66;
		color:white;
		border-radius: 2px;
		position: absolute;
		right: 10px;
		bottom: 5px;
		transition: all ease 0.4s;
		font-size: 16px;
	}
	input:hover{
		filter:alpha(opaciyt:70);
		opacity: 0.7;
	}
	ul{
		width:750px;
		height: 640px;
		position: absolute;
		bottom: 0;
		overflow-x: hidden;
		overflow-y: scroll;

	}
	li{
		width:750px;
		border-bottom: 1px  dotted #ccc;
		list-style:none;
		line-height: 57px;
		font-size: 14px;
		color:#606060;
		overflow: hidden;
		filter: alpha(opacity:0);
		opacity: 0;

	}

	}
	span{
		float: right;
		margin-right: 30px;
	}
	.errmsg{
		font-size: 14px;
		color:red;
		font-weight: bold;
		filter: alpha(opacity:0);
		opacity:0;
	}
	a{
		font-size: 14px;
		color:#990000;
		text-decoration: none;
		margin-left: 10px;
	}
	a:hover{
		color:red;
		text-decoration: underline;
	}
</style>
</head>
<body>
<div class="wrap">
<!--  
<div class="says">
	<h1>来，想对TA说什么...</h1> 
	<form action="${pageContext.request.contextPath}/customer/addlyx.action"
					method="post">
		<input id="lyx" type="text" name="lyx" />
		<button type="submit"  >发布</button>
	</form>
		<div class="errmsg">请填写内容后再发布！</div>
	</div>
-->
	<div class="says">
	<h1>来，想对TA说什么...</h1> 
		<textarea id="lyx"  name="lyx" >请点击发布试试吧</textarea>
		<button type="submit"  >发布</button>
		<div class="errmsg">请填写内容后再发布！</div>
	</div>

	<ul></ul>
</div>
<script>
	window.onload=function()
	{
		var oWrap=document.getElementsByClassName("wrap")[0];
		var oTextarea=oWrap.getElementsByTagName("textarea")[0];
		var oBtn=oWrap.getElementsByTagName("button")[0];
		var oUl=oWrap.getElementsByTagName("ul")[0];
		var errMsg=oWrap.getElementsByClassName("errmsg")[0];
		var oA=document.getElementsByTagName("a");
		//console.log(oA);
		var t=new Date();
		var Year=t.getFullYear();
		var Month=t.getMonth()+1;
		var Day=t.getDate();
		var Hours=t.getHours();
		var Minutes=t.getMinutes();
		var Scondes=t.getSeconds();
		var timers=toString(Year)+"年"+toString(Month)+"月"+toString(Day)+"日"+toString(Hours)+":"+toString(Minutes)+":"+toString(Scondes);//将获取到的日期对象拼接。
		//console.log(timers);

		function toString(n)//数字转字符串
		{
			if(n<9)
			{
				n="0"+n;
			}
			else
			{
				n=""+n;
			}
			return n;
		};

		oBtn.onclick=function()
		{
			if(oTextarea.value=="")
			{
				startMove(errMsg,{opacity:100});
				//console.log(errMsg.style.opacity)
				oTextarea.select();
			}
			else
			{
			var aLi=document.createElement("li");
			var aSpan=document.createElement("span");
			//放上文本框的值
			aLi.innerHTML=oTextarea.value;
			
			aSpan.innerHTML=timers+"<a href='javascript:;' title='删除这条信息'>删除</a>";
			//aSpan.innerHTML="<a href='javascript:;'>删除</a>"
			if(oUl.children.length>0)
			{
				oUl.insertBefore(aLi,oUl.children[0]);
				aLi.appendChild(aSpan);
				oTextarea.value="";
			}
			else
			{
				oUl.appendChild(aLi);
				aLi.appendChild(aSpan);
				oTextarea.value="";
			};
			var aLiHeight=parseInt(getStyle(aLi,"height"));
			//console.log(aLiHeight);
				aLi.style.height="0";
				startMove(aLi,{height:aLiHeight},function(){
					startMove(aLi,{opacity:100});
				});
			delLi();//添加数据后加载删除模块	
		}
		};
		
		function delLi()
		{
			for(var i=0;i<oA.length;i++)
			{
				oA[i].onclick=function()
				{	
					liNode=this.parentNode.parentNode//获取到当前A标签的父节点，也就是LI
					var aLiHeight=parseInt(getStyle(liNode,"height"))+1;
					 //console.log(aLiHeight);
					 //链式运动操作：先进行透明化，再进行高度变小，最后删除DOM元素
					 startMove(liNode,{opacity:0},function(){
						startMove(liNode,{height:0},function(){
							oUl.removeChild(liNode);
						});
					 });
				}
			}
		}
	};

	//运动框架
	 function startMove(obj,json,endFn){
		clearInterval(obj.timer);
		obj.timer=setInterval(
			function(){

				var iStop=true;
				for(var curr in json)
				{
					var oNumber=0;
					if(curr=="opacity")
					{
						oNumber=Math.round(parseFloat(getStyle(obj,curr))*100);
					}
					else
					{
						oNumber=parseInt(getStyle(obj,curr));
					}
					var speed=(json[curr]-oNumber)/6;
						speed=speed>0?Math.ceil(speed):Math.floor(speed);
					if(oNumber!=json[curr])
					iStop=false;
					if(curr=="opacity")
					{
						obj.style.filter="alpha(opacity:"+(oNumber+speed)+")";
						obj.style.opacity=(oNumber+speed)/100;
					}	
					else
					{
						obj.style[curr]=oNumber+speed+"px";
					}
				};
				if(iStop)
				{
					clearInterval(obj.timer);
					if(endFn)endFn();
				}
		},30);
	 };

	//获取非行间样式
	function getStyle(obj,name)
	{
		if(obj.currentStyle)
		{
			obj=currentStyle[name];
		}
		else
		{
			obj=getComputedStyle(obj,false)[name];
		}
		return obj;
	};
</script>


</div>
</body>
</html>